package icu.bughub.app.app.ui.screens

import android.content.res.Configuration
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.lifecycle.viewmodel.compose.viewModel
import com.google.accompanist.systemuicontroller.rememberSystemUiController
import icu.bughub.app.app.ui.components.video.VideoPlayer
import icu.bughub.app.app.ui.components.video.rememberVodController
import icu.bughub.app.app.viewmodel.VideoModel
import icu.bughub.app.webview.WebView
import icu.bughub.app.webview.rememberWebViewState

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun VideoDetailScreen(videoModel: VideoModel = viewModel(), onBack: () -> Unit = {}) {

    val systemUiController = rememberSystemUiController()

    LaunchedEffect(Unit) {
        videoModel.fetchVideoInfo()
    }

    val webViewState =
        rememberWebViewState(data = videoModel.videoDesc)

    var scaffoldModifier by remember {
        mutableStateOf(
            Modifier.background(Color.Transparent)
        )
    }

    val configuration = LocalConfiguration.current

    var videoBoxModifier by remember {
        mutableStateOf(
            Modifier
                /// .aspectRatio(16 / 9F)
                .height(300.dp)
        )
    }


    Scaffold(
        topBar = {
            if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
                TopAppBar(
                    title = {
                        Text(
                            text = "视频详情",
                            modifier = Modifier.fillMaxWidth(),
                            textAlign = TextAlign.Center,
                            color = Color.White,
                            fontSize = 18.sp,
                        )
                    },
                    colors = TopAppBarDefaults.topAppBarColors(
                        containerColor = Color(0xff149ee7),
                        titleContentColor = Color(0xff149ee7),
                    ),
                    navigationIcon = {
                        Icon(
                            imageVector = Icons.Default.ArrowBack,
                            contentDescription = "返回",
                            tint = Color.White,
                            modifier = Modifier
                                .padding(8.dp)
                                .clickable {
                                    onBack.invoke()
                                }
                        )
                    },
                )
            }
        },
        modifier = if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
            Modifier
                .background(Color(0xff149ee7))
        } else {
            Modifier
        }

    ) { paddingValues ->
        //为了让数据更新后视图刷新
        if (videoModel.infoLoad) {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
            ) {

                val vodController = rememberVodController(
                    coverUrl = videoModel.coverUrl,
                    videoUrl = videoModel.videoUrl
                )

                //横屏后 点击屏幕 状态栏即显示出来，而且不会再隐藏 如何解决这个问题？
                LaunchedEffect(configuration.orientation) {
                    // 播放视频
                    // vodPlayer.startVodPlay(videoModel.videoUrl)
                    //vodController.startVodPlay(videoModel.videoUrl)
                    vodController.restore()
                    if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {
                        videoBoxModifier = Modifier
                            .fillMaxWidth()
                            //.aspectRatio(16 / 9f)
                            .height(300.dp)
                        systemUiController.isSystemBarsVisible = true
                        //scaffoldModifier = Modifier
                        //  systemUiController.setStatusBarColor(Color.Transparent)
                    } else {
                        videoBoxModifier = Modifier
                            .fillMaxSize()
                        systemUiController.isSystemBarsVisible = false
                        //scaffoldModifier = Modifier
                    }

                }
                //视频区域
                Box(modifier = videoBoxModifier) {
                    VideoPlayer(vodController)
                }

                //标题
                Text(
                    text = videoModel.videoTitle,
                    modifier = Modifier
                        .fillMaxWidth(),
                    textAlign = TextAlign.Start,
                    fontSize = 16.sp,
                    color = Color(0xff333333)
                )

                //想让标题一起滚动，有两个方案
                // 方案1：把标题放到视频简介的html文本中去
                // 方案2：计算视频简介在webView中的高度，然后动态设置webView的高 度

                if (configuration.orientation == Configuration.ORIENTATION_PORTRAIT) {

                }

                //简介
                WebView(
                    state = webViewState,
                )


            }
        } else {
            CircularProgressIndicator(color = Color(0xff149ee7))
        }
    }

}